<template>
	<!-- 详情页面 -->
	<div class="container">
		<el-card style="max-width: 680px">
			<template #header>
				<div class="card-header">
					<span>公告标题：{{dataList?.title}}</span>
				</div>
			</template>
			<div class="content">
                <div class="left">
                    <el-image style="width: 100%; height: 100%" :src="dataList.title_img" :fit="fit" />
                </div>
                <div class="right" style="position: relative;">
                    <span style="font-size: 20px;font-weight: 600;">公告内容</span>
                    <div>
                        {{dataList?.title_content}}
                    </div>
                    <div style="font-size: 12px;color: #a8abb2;position: absolute;bottom: -100px;" >发布时间：<span>{{dataList?.title_time}}</span></div>
                </div>
            </div>
			<!-- <template #footer>Footer content</template> -->
		</el-card>
	</div>
</template>

<script setup>
import { onMounted ,ref} from "vue";
import { getTitleInfo } from "@/api/student/home";
const props = defineProps(["id"]);
const dataList = ref([]);
// 获取对应的公告数据
const getValue = async () => {
	try {
		const res = await getTitleInfo({ id: props?.id });
		if (res.data.code === 200) {
            dataList.value = res.data.data[0];
		} else {
			ElNotification({
				message: "获取失败 ",
				type: "error",
				duration: 1000
			});
		}
	} catch (error) {
		console.log(error);
	}
};

onMounted(() => {
	getValue();
});
// console.log(props?.id)
</script>

<style scoped lang="scss">
.container{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    .content{
        width: 600px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .left{
            width: 48%;
            height: 100%;
        }
        .right{
            width: 48%;
            height: 100%;
        }
    }
}
</style>
